import { Component, OnInit, HostBinding } from '@angular/core';
import { ViewsserviceService } from '../../services/viewsservice.service'
import { fromEvent } from 'rxjs';
import { NzMessageService } from 'ng-zorro-antd';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from '@angular/animations';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.styl'],
  animations: [
    trigger('openClose', [

      state('open', style({
        opacity: 1,
        backgroundColor: 'rgb(48, 54, 67)',// rgb(253, 253, 254) 
        // filter: 'blur(0.01rem)',
        boxShadow: '0 0 8px 1px rgba(0,0,0,0.6)',
        overflow: 'hidden',
        zIndex: 99
      })),
      state('closed', style({
        opacity: 0,
        backgroundColor: 'rgba(0,0,0,0)'
      })),
      transition('open => closed', [
        animate('0.3s')
      ]),
      transition('closed => open', [
        animate('0.3s')
      ]),
    ]),
    trigger('headerAnimations', [

      state('open', style({
        opacity: 1,
        top: '0rem'
      })),
      state('closed', style({
        opacity: 1,
        top: '1rem'
      })),
      transition('open => closed', [
        animate('0.3s')
      ]),
      transition('closed => open', [
        animate('0.3s')
      ]),
    ]),
    trigger('fontColor', [

      state('open', style({
        color: 'rgba(255,255,255,0.65)',
        fontWeight: '500'
      })),
      state('closed', style({
        color: '#40485b',
        fontWeight: '500'
      })),
      transition('open => closed', [
        animate('0.3s')
      ]),
      transition('closed => open', [
        animate('0.3s')
      ]),
    ]),
  ]
})
export class HeaderComponent implements OnInit {

  constructor(public service: ViewsserviceService, private message: NzMessageService) {

  }

  public list: any[] = [
    { title: '首页', icon: 'home', url: '/home' },
    { title: '论坛', icon: 'code', url: '/forum', click: "createMessage('warning')" },
    { title: '学习资料', icon: 'smile', url:'/updateresource' },
    // {title:'科创月报名',icon:'team'},
    { title: '加入我们', icon: 'team', url: '/add-we' }
  ];
  // public navRow: string = "horizontal";
  // public navColumn: string = "vertical";
  // public navStyle: any = "";
  visible = false; // 抽屉控制
  placement = 'right'; // 抽屉弹出位置
  isOpen = false;
  isCollapsed = false;
  ngOnInit() {
    // 监听滚动条获取滚动条距离顶部高度
    fromEvent(window, 'scroll').subscribe((event) => {
      var scrollTop = document.documentElement.scrollTop;
      const element = document.getElementById('header-background');
      const element1 = document.getElementById('stick');
      if (scrollTop >= 30) {
        this.isOpen = true;
        element.classList.add('compatible');
        element1.style.top = '0rem';
        element1.style.transition = 'all 0.3s';


      } else {
        this.isOpen = false;
        element.classList.remove('compatible');
        element1.style.top = '1rem';
        element1.style.transition = 'all 0.3s';

      }
    })
  }
  ngAfterViewInit(): void {
    this.element(".ant-drawer-body").style.padding = "0"
  }
  // 抽屉打开
  open(): void {
    this.visible = true;
  }

  // 抽屉关闭
  close(): void {
    this.visible = false;
  }

  toggleCollapsed(): void {
    this.isCollapsed = !this.isCollapsed;
  }
  hideDrawer(): void {
    this.close()
  }
  element(id: string): any {
    return document.documentElement.querySelector(id);
  }
  routingbtn(index) {
    // var element:any = document.querySelectorAll(".routingstyle");
    // console.log(element);
    // for (let i = 0; i < element.length; i++) {
    //   element[index].style.color = "#6357"

    // }
  }
  createMessage(type: string): void {
    this.message.create(type, `功能正在开发中，敬请期待！`);
  }

}
